<template>
  <div class="filter-work-order-form">
    <h2 class="form-title">过滤工单详情</h2>
    <div class="form-container">
      <div class="form-column">
        <el-form-item label="工单号：">
          <el-input v-model="formData.workOrderNumber" readonly />
        </el-form-item>
        <el-form-item label="工段：">
          <el-select v-model="formData.workSection" placeholder="请选择工段">
            <el-option v-for="item in workSections" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="工单类型：">
          <el-select v-model="formData.workOrderType" placeholder="请选择工单类型">
            <el-option label="正常工单" value="正常工单"></el-option>
            <el-option label="加急工单" value="加急工单"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品编码：">
          <el-input v-model="formData.productCode" readonly>
          </el-input>
        </el-form-item>
        <el-form-item label="配方版本：">
          <el-input v-model="formData.formulaVersion">
          </el-input>
        </el-form-item>
        <el-form-item label="工艺版本：">
          <el-input v-model="formData.processVersion">
          </el-input>
        </el-form-item>
        <el-form-item label="单位：">
          <el-input v-model="formData.unit" readonly />
        </el-form-item>
      </div>
      <div class="form-column">
        <el-form-item label="车间：">
          <el-select v-model="formData.workshop" placeholder="请选择车间">
            <el-option v-for="item in workshops" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="产线：">
          <el-select v-model="formData.productionLine" placeholder="请选择产线">
            <el-option v-for="item in productionLines" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="单据来源：">
          <el-select v-model="formData.documentSource" placeholder="请选择单据来源">
            <el-option v-for="item in documentSources" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称：">
          <el-input v-model="formData.productName" readonly @click="showDialog" />
        </el-form-item>
        <el-form-item label="工艺路线：">
          <el-input v-model="formData.processRoute" />
        </el-form-item>
        <el-form-item label="计划量：">
          <el-input v-model="formData.plannedQuantity" />
        </el-form-item>
        <el-form-item label="计划开始时间：">
          <el-date-picker v-model="formData.plannedStartTime" type="datetime" placeholder="选择日期时间"
            format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item label="计划结束时间：">
          <el-date-picker v-model="formData.plannedEndTime" type="datetime" placeholder="选择日期时间"
            format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
      </div>
    </div>
    <!-- 添加按钮 -->
    <div class="button-container">
      <el-button type="primary" @click="submitForm()">添加工单</el-button>
    </div>
  </div>

  <el-dialog v-model="dialogTableVisible" title="产品信息" width="800" draggable>
    <el-table :data="productsModellist" @row-click="selectProduct">
      <el-table-column property="productsName" label="产品名称" width="150" />
      <el-table-column property="productsNumber" label="编号" width="200" />
      <el-table-column property="productsType" label="规格" />
      <el-table-column property="productsUnit" label="单位" />
      <el-table-column property="price" label="价格" />
      <el-table-column property="remark" label="数量" />
    </el-table>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
// 生成唯一工单号的函数
const generateWorkOrderNumber = () => {
  const date = new Date()
  const year = date.getFullYear().toString().slice(2) // 获取年份后两位
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  const hour = date.getHours().toString().padStart(2, '0')
  const minute = date.getMinutes().toString().padStart(2, '0')
  const second = date.getSeconds().toString().padStart(2, '0')
  const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0')

  return `WO${year}${month}${day}${hour}${minute}${second}${random}`
}

const productsModellist = ref([{
  productsId: 0,
  productsName: "",
  productsNumber: "",
  productsType: "",
  productsUnit: "",
  productsNum: "",
  price: 0,
  remark: "",
  del: true
}])

const dialogTableVisible = ref(false)

// 定义表单数据响应式对象，初始化工单号
const formData = ref({
  workOrderNumber: generateWorkOrderNumber(),
  workSection: '',
  workOrderType: '', // 初始化为空字符串
  productCode: '',
  formulaVersion: '',
  processVersion: '',
  unit: '',
  workshop: '',
  productionLine: '',
  documentSource: '',
  productName: '',
  processRoute: '',
  plannedQuantity: '',
  plannedStartTime: '',
  plannedEndTime: ''
})

// 模拟车间数据
const workshops = ref([
  { value: '包装车间1', label: '包装车间1' },
  { value: '包装车间2', label: '包装车间2' }
])

// 模拟工段数据
const workSections = ref([
  { value: '包装工段1', label: '包装工段1' },
  { value: '包装工段2', label: '包装工段2' }
])

// 模拟产线数据
const productionLines = ref([
  { value: '包装产线1', label: '包装产线1' },
  { value: '包装产线2', label: '包装产线2' }
])

// 模拟单据来源数据
const documentSources = ref([
  { value: '系统自动生成', label: '系统自动生成' },
  { value: '手动录入', label: '手动录入' },
  { value: '外部导入', label: '外部导入' }
])

onMounted(() => {
  productsModel()
})

const productsModel = () => {
  axios.get('http://8.154.44.176:8000/c-read/api/Products/GetProducts').then((response) => {
    productsModellist.value = response.data.data
    console.log("产品表", productsModellist.value)
  })
}

// 添加方法
const submitForm = () => {
  const plannedQuantity = formData.value.plannedQuantity
  if (!/^[0-9]+$/.test(plannedQuantity)) {
    alert('计划量必须为正整数')
    return
  }
  if (formData.value.plannedEndTime <= formData.value.plannedStartTime) {
    console.log('结束时间必须大于开始时间')
    return
  }
  console.log('执行添加方法', formData.value)
  axios.post('https://localhost:7229/api/Ticket/AddTicket', formData.value).then((response) => {
    if (response.data.code == 200) {
      ElMessage.success('添加成功')
      // 清空表单数据
      formData.value = {
        workOrderNumber: generateWorkOrderNumber(),
        workSection: '',
        workOrderType: '', // 初始化为空字符串
        productCode: '',
        formulaVersion: '',
        processVersion: '',
        unit: '',
        workshop: '',
        productionLine: '',
        documentSource: '',
        productName: '',
        processRoute: '',
        plannedQuantity: '',
        plannedStartTime: '',
        plannedEndTime: ''
      }
    }
    else {
      ElMessage.error('添加失败')
    }
  })
}

// 显示对话框的方法
const showDialog = () => {
  dialogTableVisible.value = true
}

// 选择产品的方法
const selectProduct = (row) => {
  const selectedId = row.productsId
  console.log('选中的 productsId:', selectedId)
  formData.value.productName = row.productsName
  formData.value.productCode = row.productsNumber
  formData.value.unit = row.productsUnit
  dialogTableVisible.value = false
}
</script>

<style scoped>
.filter-work-order-form {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  padding: 20px;
  border-radius: 4px;
}

.form-title {
  text-align: center;
  margin-bottom: 20px;
}

.form-container {
  display: flex;
  justify-content: space-between;
}

.form-column {
  width: 48%;
}

.el-form-item {
  margin-bottom: 15px;
}

/* 按钮容器样式 */
.button-container {
  margin-top: 20px;
  text-align: right;
}
</style>